const view = Vue.createApp({
    data() {
        return {
            start: false, // 是否开始模拟训练
            stock: {}, // 记录发送到后端查询的股票信息
            initial: 10000, // 初始资金
            premium: 0.1, // 手续费率
            random: false, // 是否随机选择日期
            show: false, // 是否显示股票信息
            stockRules: { // 股票信息校验规则
                code: [{
                    required: true,
                    message: '请输入股票代码',
                    trigger: 'blur'
                }, ],
                date: [{
                    required: true,
                    message: '请选择日期',
                    trigger: 'blur'
                }, ]
            },
            fullscreenLoading: false, // 是否显示加载动画
            currentStock: {}, // 当前股票信息
            currentStocks: [], // 当前股票所有信息
            echartStocks: [], // echarts中显示的股票信息
            loading: false,   // 是否显示加载动画
            isBuy: false,     // 是否买入 控制买入弹窗
            isSell: false,    // 是否卖出 控制卖出弹窗
            buyData: {},      // 买入数据
            sellData: {},     // 卖出数据
        }
    },
    watch: {
        // 监听 random 的值，如果变为true，则随机日期
        random: {
            handler: function (val, oldVal) {
                if (val) {
                    this.stock.date = this.getRandomDate()
                } else {
                    this.stock.date = null
                }
            }
        },
        // 监听购买股票数量变化
        'buyData.count': {
            handler: function (val, oldVal) {
                // 计算购买股票的总价
                this.buyData.common = this.buyData.count * this.buyData.price
            }
        },
        // 监听购买股票金额变化
        'buyData.common': {
            handler: function (val, oldVal) {
                // 计算购买股票的数量
                this.buyData.count = Math.floor(this.buyData.common / this.buyData.price)
            }
        }
    },
    computed: {
        // 所有股票信息 [股票代码，股票名称]
        stockData() {
            // 从 vuex 中获取数据
            return this.$store.getters.getStockData
        }
    },
    methods: {
        // 进入股票训练页面
        to_start() {
            this.start = true;
            this.fullscreenLoading = true;
            // 获取所有股票代码及名称
            if (!this.stockData || this.stockData.length == 0) {
                fetch('http://127.0.0.1:8020/all')
                    .then(res => res.json())
                    .then(data => {
                        sessionStorage.setItem('stockData', JSON.stringify(data));
                        this.stockData = data;
                    })
            }
        },
        // 生成echarts
        generate_echarts(data) {
            const myChart = echarts.init(this.$refs.main, 'westeros');

            const option = {
                title: {
                    text: this.currentStock.name + '股票信息',
                    left: 'center',
                    top: 20,
                    color: 'white'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                // x 轴显示的数据
                xAxis: {
                    data: data.categoryData,
                },
                yAxis: {
                    scale: true,
                    splitArea: {
                        show: true
                    }
                },
                series: [{
                    type: 'candlestick',
                    data: data.values
                }]
            }
            myChart.setOption(option);
        },
        // 按照股票代码及日期查询股票信息
        getStock(formName) {
            this.loading = true
            // 校验输入的股票代码及日期
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    fetch('http://127.0.0.1:8020/selectTime?code=' + this.stock.code + '&date=' + this.formatDate(this.stock.date))
                        .then(response => response.json()) // 将数据转换为json格式
                        .then(data => {
                            this.loading = false
                            // 记录当前股票的所有信息
                            this.currentStocks = data
                            // 记录当前股票的最新信息
                            this.currentStock = data[data.length - 1]
                            // 生成要显示在 echarts 中的股票信息 选中的日期及之前的所有信息
                            this.echartStocks = this.currentStocks.filter(item => item.date <= this.formatDate(this.stock.date));
                            // 将查询的当前股票信息渲染到 echarts 中
                            this.generate_echarts(this.formatData())
                        })
                } else {
                    return false
                }
            })
        },
        // 模拟训练
        getNextKey() {
            if (this.echartStocks.length < this.currentStocks.length) {
                // 获取当前股票的最新信息
                this.currentStock = this.currentStocks[this.echartStocks.length]
                this.currentStocks.shift()
                // 将当前股票信息添加到 echarts 中
                this.echartStocks.push(this.currentStock)
                this.echartStocks.shift()
                // 将当前股票信息渲染到 echarts 中
                this.generate_echarts(this.formatData())
            } else {
                this.$message({
                    message: '已经是最新数据了',
                    type: 'warning'
                });
            }
        },
        // 买入操作
        buy() {
            console.log('买入');
            if (JSON.stringify(this.currentStock) == '{}') {
                this.$message({
                    message: '请先查询股票信息',
                    type: 'warning'
                });
                return
            }
            this.isBuy = true
            // 获取买入数据
            this.buyData = {
                text: '买入',
                code: this.currentStock.code,    // 股票代码
                name: this.currentStock.name,    // 股票名称
                date: this.currentStock.date,    // 日期
                price: this.currentStock.close,  // 价格
                trades: this.currentStock.traded,// 成交量
                total: this.initial,             // 可用余额
                premium: this.premium,           // 手续费率
                count: 0,                        // 购买股票数量
                common: 0,                       // 购买股票金额
            }
            console.log(this.buyData);
        },

        // 购买股票
        // 卖出操作
        sell() {
            // TODO 卖出
            this.isSell = true
            // 获取卖出数据
            this.sellData = {
                text: '卖出',
                code: this.currentStock.code,    // 股票代码
                name: this.currentStock.name,    // 股票名称
                date: this.currentStock.date,    // 日期
                price: this.currentStock.close,  // 价格
                trades: this.currentStock.traded,// 成交量
                total: this.initial,             // 可用余额
                premium: this.premium,           // 手续费率
                count: this.buyData.count,       // 当前持有股票数量
                sellCount: 0,                    // 卖出股票数量
            }
        },
        // 提交买入操作
        submitBuy() {
            // TODO 提交买入
        },
        // 提交卖出操作
        submitSell() {
            // TODO 提交卖出
        },
        // 格式化echarts展示的数据
        formatData() {
            return {
                // 将股票的信息格式化为echarts需要的数据格式
                // x 轴显示的数据 [日期]
                categoryData: this.echartStocks.map(item => this.formatDate(item.date)),
                // y 轴显示的数据 [开盘价，收盘价，最低价，最高价]
                values: this.echartStocks.map(item => [item.open, item.close, item.lowest, item.highest]),
                trades: this.echartStocks.map(item => item.traded), // 成交量
                transactions: this.echartStocks.map(item => item.transaction), // 成交额
            };
        },
        // 工具方法
        // 生成随机日期
        getRandomDate() {
            const start = new Date(1970, 0, 1); // 设置起始日期
            const end = new Date(); // 当前日期
            const startTime = start.getTime(); // 起始日期的时间戳
            const endTime = end.getTime(); // 当前日期的时间戳
            const randomTime = startTime + Math.random() * (endTime - startTime); // 在起始日期和当前日期之间生成一个随机时间戳
            const randomDate = new Date(randomTime); // 将随机时间戳转换为日期对象
            return randomDate;
        },
        // 格式化日期
        formatDate(date) {
            const _date = new Date(date); // 将日期字符串转换为日期对象
            const year = _date.getFullYear();
            const month = _date.getMonth() + 1; // 月份从0开始，所以要加1
            const day = _date.getDate();
            // 使用模板字符串将年、月、日拼接起来
            const formattedDate = `${year}-${month}-${day}`;
            return formattedDate;
        }
    },
    mounted() {}
});
// 注册 vuex
const store = Vuex.createStore({
    state() {
        return {
            stockData: [],
            count: 100
        }
    },
    getters: {
        getStockData(state) {
            return state.stockData.length > 0 ? state.stockData : JSON.parse(sessionStorage.getItem('stockData'));
        }
    },
    mutations: {
        setStockData(state, data) {
            console.log("存储信息");
            state.stockData = data;
        }
    }
})
view.use(store)
view.use(ElementPlus)
// 注册dataV组件
const {
    BorderBox11
} = DataV;
const {
    Decoration6
} = DataV;
const {
    BorderBox3
} = DataV;
const {
    BorderBox12
} = DataV;
const {
    Decoration11
} = DataV;

view.component('border-box-11', BorderBox11);
view.component('decoration-6', Decoration6);
view.component('border-box-12', BorderBox12);
view.component('border-box-3', BorderBox3);
view.component('decoration-11', Decoration11);

// 挂载到页面
view.mount('#view');